<style lang="less" scoped src="./purchase.less"></style>
<style lang="less" scoped src="../public.less"></style>
<script src="./purchase.js"></script>
<template>
    <div>
        <div style="display: flex;justify-content:space-between;margin-top: 10px;">
            <Col span="24">
            学生姓名：<Input v-model="forms.name" style="width:  150px"></Input>
            教材名称：<Input   style="width: 150px" v-model="queryData.bookName"></Input>
            <span @click="doQuery"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
        </div>
        <div>
            <span @click="showAdd"><Button type="primary" icon="plus">新增</Button></span>
        </div>
        <div class="main-table">
            <Table border :columns="columns" :data="dataList" :highlight-row="true"></Table>
        </div>
        <div class="pagination">
            <Page border :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="doQuery"
                  show-total show-elevator></Page>
        </div>

        <Modal
                title="教材购买"
                v-model="addVisible"
                width="30%"
                :loading="true"
                :closable="true"
        >
            <Form :label-width="100" :model="formData" :rules="formDataRules" ref="formData">
                <Row>
                    <Col span="24">
                        <FormItem label="学生姓名:">
                            <Input v-model="form.name" style="width:180px" @on-blur="queryByName"></Input>
                            <span @click="studentModal = true"><Button type="primary" size="small" icon="android-search"></Button></span>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                    <FormItem label="家长电话:">
                        <Input v-model="form.parentphone" style="width:180px"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <!--<Row>-->
                    <!--<Col span="24">-->
                    <!--<FormItem label="票据号:">-->
                        <!--<Input v-model="formData.code" style="width:180px"></Input>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                <!--</Row>-->
              <Row>
                  <Col span="24">
                      <FormItem label="教材:" prop="otherCost">
                          <Button type="primary" style="margin-left: 10px" @click="addBooks" icon="plus">添加教材
                          </Button>
                          <span style="margin-left:5px;">
                        <Tag v-for="item in bookList" :key="item.id" :name="item" closable
                             @on-close="whenDelBooks">{{item.name}}({{item.price}}元)</Tag>
                    </span>
                      </FormItem>
                  </Col>
              </Row>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="doSave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="addVisible = false">取消</Button>
            </div>
        </Modal>
        <Modal
                title="选择教材"
                v-model="booksVisible"
                width="80%"
                :mask-closable="false"
                @on-ok="whenSelectBook"
        >
            <books ref="books" :ids="ids"></books>
        </Modal>
        <Modal v-model="studentModal"
               title="学员列表"
               width="80%"
               :styles="{top: '20px'}"
               @on-ok="setStudent"
               @on-cancel="studentModal = false"
               :closable="true">
            <div class="table-content">
                <student-list ref="student"></student-list>
            </div>
        </Modal>

        <Modal v-model="weChatPayModal"
               title="支付中心条码支付"
               width="300px"
               :transfer="false"
               :mask-closable="false"
        >
            <div style="text-align: center">
                <h3>使用扫码枪扫描用户出示的支付条码</h3>
                <h3 style="color: red;">注意：扫码前请确保光标在输入框内</h3>
                <Input v-model="payNum" clearable style="width: 200px;margin-top: 20px;"></Input>
            </div>
            <div slot="footer">
                <Button type="primary" @click="payByWechat" :loading="payLoading">支付</Button>
                <Button type="ghost" style="margin-left: 8px" @click="weChatPayModal = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>

